<template>
	<div>
        <!-- 头部 -->
        <div class="ui-header-item gradient">
            <div class="ui-header-arraw prev" @touchstart.stop @click="handleHistory">
                <i class="iconfont icon iconjiantou-zuo-cuxiantiao"></i>
            </div>
            <div class="ui-header-title">找回密码</div>
        </div>
        <div>
        <!-- 表单内容 -->
            <van-form validate-first @submit="onSubmit">
                <van-field
                    clearable
                    v-model="form.user_phone"
                    name="username"
                    label="账号"
                    placeholder="手机号"
                    :rules="[{ pattern:regular.phoneNumNuoer, message: '账号格式不正确' }]"
                />
                <van-field
                    clearable
                    v-model="form.pic_code"
                    name="pic_code"
                    label="图片验证"
                    placeholder="请输入图片内容"
                    maxlength="4"
                    type="digit"
                    :rules="[{ pattern:regular.required, message: '请输入验证码' }]"
                >
                    <template #button>
                        <img class="ui-message-img" :src="imgCode" @touchstart.stop @click="handleIdentifyClick">
                    </template>
                </van-field>
                <van-field
                    clearable
                    v-model="form.msg_content"
                    name="msg_content"
                    label="验证码"
                    placeholder="短信验证码"
                    maxlength="4"
                    type="digit"
                    :rules="[{ pattern:regular.required, message: '请输入手机验证码' }]"
                >
                    <template #button>
                        <van-button :disabled="sendMassage=='发送验证码'?false:true" native-type="button" size="small" type="primary" class="ui-message-btm" @click.stop="getCode">{{sendMassage}}</van-button>
                    </template>
                </van-field>
                <van-field
                    clearable
                    v-model="form.password_user"
                    name="password"
                    label="密码"
                    placeholder="请输入密码"
                    :rules="[{ pattern:regular.required, message: '请输入密码' }]"
                />
                <van-field
                    clearable
                    v-model="form.password_user_again"
                    name="password"
                    label="确认密码"
                    placeholder="请再次输入密码"
                    :rules="[{ pattern:regular.required, message: '请再次输入密码' }]"
                />
                <div style="margin:.85rem;">
                    <van-button default block type="info" color="#2398aa" native-type="submit" @click="submit">提交</van-button>
                </div>
            </van-form>
        </div>
	  </div>
</template>
<script>
import mixinCommon from '@/views/content/mixins/common';
import mixinRequest from '@/views/content/mixins/request';
import loginData from '@/assets/data/login';
// 路由引入
import menuData from '@/assets/data/menu';
// 引入验证正则表达式
import Validator from '@/utils/validator';
import {regular} from '@/utils/validate'
import {
    LocalStorage
} from "@/utils/storage";
export default {
    name: 'login',
    data() {
        return {
            sending:false,
            // 表单变量
            form:{
                user_phone: '',
                pic_code: '',
                msg_content: '',
			    password_user: '',
                password_user_again:''
            },
            sendMassage:'发送验证码',
            // 验证正则规则
            regular:regular,
            // 图片验证码
            imgCode: this.baseUrl+'/duzikai_api_mgr_image_code.png?invoke_method=public_page_4m_random_code&pre_db_para_length_4_list=4&t=' + new Date().getTime()
        }
    },
    mixins:[
        mixinCommon,
        mixinRequest
    ],
    computed:{
    },
    watch:{
    },
    created(){
    },
    mounted(){
        this.init();
    },
    methods:{
        // 初始化
        init(){
        },
        // 提交表单
        go(){
            this.$router.replace({
                path:'/login'
            });
        },
        // 提交表单
		onSubmit() {
            // 账号密码登录
            if(this.form.password_user !== this.form.password_user_again){
                this.showToast('两次密码不一致！',false);
                return;
            }
            if(!this.sending){
                this.sending=true;
                this.$http.post({
                    name:'common.change.password',
                    data:{
                        invoke_method:'change_password',
                        user_phone:this.form.user_phone,
                        password_user:this.form.password_user,
                        pic_code:this.form.pic_code,
                        msg_content:this.form.msg_content
                    },
                    loading:{
                        enabled:true
                    }
                }).then(({result,response})=>{
                    this.go();
                }).catch(({msg})=>{
                    this.sending=false;
                    this.showMessage(msg);
                });
            }
		},
        // 获取短信验证码
        getCode(event){
            var that = this;
            var target = event.currentTarget;
            if(!(Validator({value:this.form.user_phone,type:'phoneNumNuoer'}))){
                this.showToast('手机号码不正确！',false);
                return;
            }
            if(!(Validator({value:this.form.pic_code,type:'positiveInteger'}))){
                this.showToast('请填写图片验证码',false);
                return;
            }
            if(this.sendMassage==='发送验证码'){
                this.$http.post({
                    name:'login',
                    data:{
                        invoke_method:'send_msg_phone',
                        user_phone:this.form.user_phone,
                        pre_cmd_para_db_exist_user:false,
					    pic_code:this.form.pic_code,
                    },
                    loading:{
                        enabled:false
                    }
                }).then(({result,response})=>{
                    var data=data||{};
                    data.time=60;
					this.sendMassage=data.time+'S后可重发';
					target.clear=setInterval(function(){
						if(data.time>1){
							that.sendMassage=--data.time+'S后可重发';
						}else{
							that.sendMassage='发送验证码';
							clearInterval(target.clear);
						};
					},1000);
                }).catch(({msg,status})=>{
                    this.showMessage(msg);
                });
			};
        },
        // 更换图片验证码
        handleIdentifyClick(){
            var picSrc =  this.baseUrl+'duzikai_api_mgr_image_code.png?invoke_method=public_page_4m_random_code&pre_db_para_length_4_list=4&t=' + new Date().getTime()
			this.imgCode = picSrc;
        }
    },
    components:{
    },
    beforeRouteLeave(to,from,next){
        if(this.$route.query.auth){
            if(this.isLogin){
                next();
            }else{
                next(false);
            };
        }else{
            next();
        };
    },
    beforeDestroy(){
    }
}
</script>
<style lang="less" scoped>
.ui-others-wrap{
    margin-top:2rem;
    font-size:.69rem;
    color:#878787;
    line-height:.69rem;
    span{
        position:relative;
    }
    span::before{
        content:'';
        position:absolute;
        left:-1.97rem;
        top:.25rem;
        display:block;
        width:1.33rem;
        height:.03rem;
        background: #C7C6C9;
    }
    span::after{
        content:'';
        position:absolute;
        right:-1.97rem;
        top:.25rem;
        display:block;
        width:1.33rem;
        height:.03rem;
        background: #C7C6C9;
    }
}
.ui-wechart-wrap{
    margin:.85rem auto 0 auto;
    width:6rem;
    height:2rem;
    background:#07C160;
    font-size:.85rem;
    color:#fff;
    border-radius:1rem;
    &.alipay{
        background:#3366FF;
    }
    .ui-wechart-logo{
        width:1.41rem;
        height:1.15rem;
        margin-right:.42rem;
        background-size:100%;
        background-position:center;
        background-repeat:no-repeat;
        // background-image:url(~@/assets/images/wechat-logo.png);
    }
}
</style>
<style>
.van-field__control{
    font-size:.8rem;
}
.ui-message-btm{
	margin-right:.27rem;
	width:5.33rem;
	height:1.81rem;
	border-radius:.1rem;
	background-color:#FFF3F3;
	border-color:#FFF3F3;
	color:#EC4040;
}
.login-jump-wrap{
    margin:0 .85rem;
    line-height:1.2em;
    font-size:.8rem;
    color:#666;
}
</style>
